<template>
    <!-- Echarts容器 -->
    <div class="charts" ref="myechar" >      
    </div>
</template>

<script>
import * as  echarts from 'echarts'
export default {
    name:'lineChart',
    props:['chartValue'],
    data() {
        return {
            
        }
    },
    methods:{
         getEchart(){
             const myChart = echarts.init(this.$refs.myechar) 
             let  option = {
                 grid:{ 
                        left: 0,
                        right: 0,
                        top:0,
                        bottom:0
                    },
                 xAxis: {
                    // 隐藏x轴
                     show: false,
                     type: 'category',
                    //取消坐标轴两边留白策略
                     boundaryGap: false,
                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                 },
                 yAxis: {
                    //隐藏y轴 
                     show: false,
                     type: 'value'
                 },
                //  设置数据集
                /* dataset:{
                    source:[
                          ['星期','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                          ['搜索用户数',22*200, 5*200, 32*200, 10*200, 42*200, 20*200, 40*200]
                    ]
                }, */
                  // 系列的设置：绘制什么类型的图表、数据的展示在这里设置
                 series: [
                     {
                         data:this.chartValue,
                         type: 'line',
                        //  seriesLayoutBy: 'row',
                        //平滑过渡折点
                         smooth: true,
                        //取消折点圆圈
                        //symbol: 'none',
                        itemStyle:{
                            //图形透明度
                            opacity:0
                        },
                         lineStyle: {
                             width: 1,
                             color:'rgba(19,206,102)'
                         },
                         areaStyle: {
                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                 {
                                     offset: 0,
                                     color: 'rgba(19,206,102,0.8)'
                                 },
                                 {
                                     offset: 1,
                                     color: 'rgba(19,206,102,0.1)'
                                 }
                             ])
                         }
                     }
                 ]
             };
             myChart.setOption(option)
             window.addEventListener("resize", () => {//监听浏览器窗口大小
                if(myChart){
                    myChart.resize();
                }
            });
         }
     },
     mounted(){
        this.getEchart()
     }
}
</script>

<style scoped>
    .charts{
        width: 100%;
        height: 90%;
    }
</style>